<template>
    <div>
        <h2>home 下的食品列表组件</h2>
        <!-- 食品列表 -->
        <el-table :data="arrs">
            <el-table-column prop="id" label="id"> </el-table-column>
            <el-table-column prop="name" label="食品"> </el-table-column>
            <el-table-column prop="text" label="介绍"> </el-table-column>
            <el-table-column label="操作">
                <!-- 编辑删除 -->
                <template slot-scope="scope">
                <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
                    >编辑</el-button
                >
                <el-button size="mini" @click="addfn(scope)">添加到订单</el-button>
                <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)"
                    >删除</el-button
                >
                </template>
            </el-table-column>
        </el-table>


        <!-- 弹窗 -->
        <el-dialog
        title="编辑"
        :visible.sync="dialogFormVisible"
        >
        <el-form :model="form">
            <el-form-item label="姓名" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="文本" :label-width="formLabelWidth">
            <el-input v-model="form.text" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="fntrue">确 定</el-button>
        </div>
        </el-dialog>

    </div>
</template>
<script>
import instance from "../../api/index";
export default {
  name: "HomeUser",
  data() {
    return {
      arrs: null,
      form: {
        id: "0",
        name: "姓名",
        text: "文本",
      },
      dialogFormVisible: false,
      formLabelWidth: "120px",
    };
  },
  methods: {
    add(a) {
      //用户行为
      // 不能直接修改count
      // this.$store.commit("increment")
      this.$store.dispatch("asyncincrement", a);
    },
    jian(b) {
      this.$store.commit("decrement", b);
    },
    async getarrs() {
      let { data } = await instance.get("/homefood");
      console.log("用户列表", data);
      this.arrs = data;
    },
    async addfn(a) {
      console.log(a.row);
      let name = a.row.name;
      let text = a.row.text;
      let { data } = await instance.post("/homeorder", { name, text });
      console.log(data);
    },
    handleEdit(a, b){   //点击编辑按钮
        this.dialogFormVisible = !this.dialogFormVisible;
        this.form.name = b.name;
        this.form.text = b.text;
        this.form.id = b.id;
    },
    fntrue(){
        // 弹框确认按钮
        this.dialogFormVisible = false;
        this.editHomeUser()
    },
    handleDelete(a, b){ //删除按钮
        //用户行为
      console.log(a, b);
      //   this.i = i
      this.$confirm("确定删除该条信息吗", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          console.log("删除");
          this.deleteHomeUser(a);
        })
        .catch(() => {
          console.log("取消");
        });
    },
    // 编辑业务
    async editHomeUser() {
        let name = this.form.name;
        let text = this.form.text;
        let id = this.form.id;
        //   console.log("编辑业务", name, text);
        let { data } = await instance.put("/homefood/edit/" + id, {
            name,
            text,
        });
        //   console.log(data);
        this.getarrs();
    },
    // 删除业务
    async deleteHomeUser(index) {
        let { data } = await instance.delete("/homefood/" + index);
        console.log(data);
        this.getarrs();
    },
  },
  created() {
    this.getarrs();
  },
};
</script>
<style scoped>
    
</style>